import { h, defineComponent, markRaw, TransitionGroup } from 'vue'
import ContainerNode from '../../ItemNode/ContainerNode'
import classes from '../../ItemNode/ItemNode.module.css'
import {
  ElCol,
  ElForm,
  ElFormItem,
  ElIcon,
  ElInputNumber,
  ElPopover,
  ElRadioButton,
  ElRadioGroup,
  ElRow,
  ElTag,
  ElText
} from 'element-plus'
import { Edit } from '@element-plus/icons-vue'

export default class NRow extends ContainerNode {
  isNRow = true
  isLayoutNode = true

  constructor(node?: NRow) {
    super(node)

    if (!node) {
      this.path = './components/NRow/NRow.tsx'
      this.name = '24栏容器'

      this.props.gutter = 0 // 当ElRow父组件是ElScrollbar时，gutter不为0的ElRow的margin会造成滚动条；可用gutter为0的ElRow包裹gutter不为0的ElRow
      this.props.justify = 'start'
      this.props.align = 'top'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <ElRow
                style="box-sizing: border-box;"
                gutter={this.props.gutter}
                justify={this.props.justify}
                align={this.props.align}
              >
                {() => (
                  <TransitionGroup name="list">
                    {this.children.map((child, i) =>
                      h(ElCol, { key: child.uuid, span: (child.props.span ??= 24) }, () =>
                        h(child.component)
                      )
                    )}
                  </TransitionGroup>
                )}
              </ElRow>
            </pComponent>
          )
        },
        {
          name: 'NRow'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.style.outlineColor = 'transparent'

        return () => <pView></pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                水平排列
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.justify}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                  <ElRadioButton
                    value="space-between"
                    label="两端对齐"
                    size="small"
                  ></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                垂直排列方式
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.align}>
                  <ElRadioButton value="top" label="上" size="small"></ElRadioButton>
                  <ElRadioButton value="middle" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="bottom" label="下" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                栅格间隔
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInputNumber v-model={this.props.gutter} min={0} size="small"></ElInputNumber>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                列宽管理
              </ElText>
              <div class={classes['params-item-content']}>
                {this.children.map((tag) => (
                  <ElTag key={tag.id} type="primary" effect="dark" size="small">
                    {tag.props.span}
                    <ElPopover width={180} trigger="click" teleported={false} placement="top">
                      {{
                        reference: () => (
                          <ElIcon color="var(--el-color-warning)">
                            <Edit></Edit>
                          </ElIcon>
                        ),
                        default: () => {
                          return (
                            <>
                              <ElForm label-width="50px">
                                <ElFormItem label="列宽">
                                  <ElInputNumber
                                    v-model={tag.props.span}
                                    min={1}
                                    max={24}
                                    size="small"
                                  ></ElInputNumber>
                                </ElFormItem>
                              </ElForm>
                            </>
                          )
                        }
                      }}
                    </ElPopover>
                  </ElTag>
                ))}
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.imports = {
      ...sfcObj.imports,
      'element-plus': {
        ElRow: 'ElRow',
        ElCol: 'ElCol'
      }
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <ElRow
    :gutter="${this.props.gutter}"
    justify="${this.props.justify}"
    align="${this.props.align}"
  >
    ${this.children.map((child, i) => `<ElCol :span="${child.props.span}">\n      ${child.uuid}\n    </ElCol>`).join('\n  ')}
  </ElRow>
       `
    )

    return sfcObj
  }
}
